<template>
  <scroll-view
    class="wanlshop-find-container"
    :style="{
      paddingTop: `${headHeight}px`,
      height: `${windowHeight}px`,
      backgroundColor: ``,
    }"
    scroll-y
    enable-back-to-top
    enable-flex="true"
    @scrolltoupper="handleUpper"
    @scrolltolower="handleLower"
  >
    <block v-if="!user.isLogin && !userNo">
      <view class="bg-white margin-bj radius-bock flex align-center justify-center padding-lr padding-tb-xl">
        <view class="text-center">
          <text class="wanl-gray">登录后才能看到您关注店铺的动态哦</text>
          <view class="margin-top-sm">
            <button class="cu-btn bg-orange" @tap="$wanlshop.auth('/pages/find')">马上登陆</button>
          </view>
        </view>
      </view>
    </block>
    <block v-else>
      <view
        class="wanlshop-find-container__list wanl-find margin-top-sm"
        v-for="(find, index) in dataList"
        :key="find.id"
      >
        <view class="margin-lr-bj bg-white radius-bock padding-lr-bj padding-top-bj">
          <!-- 头部 -->
          <view class="userinfo">
            <block v-if="find.shop">
              <view class="avatar" @tap="handleUser(find.user_no)">
                <view
                  class="cu-avatar round margin-right-bj"
                  :style="{
                    backgroundImage: 'url(' + $wanlshop.oss(find.shop.avatar, 35, 35, 2, 'avatar') + ')',
                  }"
                ></view>
                <view class="content">
                  <view class="wanl-find-head text-cut">
                    <text class="wanl-black margin-right-bj shopname">
                      {{ find.shop.shopname }}
                    </text>
                    <!-- <view
											v-if="find.isLive"
											@tap="onLive(find.isLive.id)"
											class="cu-tag sm wanl-bg-orange round"
										>
											<text class="wlIcon-zhibo"></text>
											直播中
										</view> -->
                  </view>
                  <view class="wanl-gray text-min">
                    {{ $wanlshop.timeToDate(find.createtime) }}
                  </view>
                </view>
              </view>
              <view class="menu">
                <button class="cu-btn radius-bock text-sm" @click.stop="handleFollow(index, find.shop)">
                  <view v-if="find.isFollow === 0">
                    <text class="wlIcon-31xuanze margin-right-xs text-bold"></text>
                    关注
                  </view>
                  <view v-else>
                    <text class="wlIcon-31guanbi margin-right-xs text-bold"></text>
                    取关
                  </view>
                </button>
                <button class="cu-btn wlIcon margin-left-sm" @click.stop="onShop(find.shop.id)">
                  <text class="wlIcon-31dianpu"></text>
                </button>
              </view>
            </block>
            <block v-else>
              <view class="avatar" @tap="handleUser(find.user_no)">
                <view
                  class="cu-avatar round margin-right-bj"
                  :style="{
                    backgroundImage: 'url(' + $wanlshop.oss(find.user.avatar, 35, 35, 2, 'avatar') + ')',
                  }"
                ></view>
                <view class="content">
                  <view class="wanl-find-head text-cut">
                    <text class="wanl-black margin-right-bj shopname">
                      {{ find.user.nickname }}
                    </text>
                    <!-- <view
											v-if="find.isLive"
											@tap="onLive(find.isLive.id)"
											class="cu-tag sm wanl-bg-orange round"
										>
											<text class="wlIcon-zhibo"></text>
											直播中
										</view> -->
                  </view>
                  <view class="wanl-gray text-min">
                    {{ $wanlshop.timeToDate(find.createtime) }}
                  </view>
                </view>
              </view>
              <view class="menu">
                <button class="cu-btn radius-bock text-sm" @click.stop="handleFollow(index)">
                  <view v-if="find.isFollow === 0">
                    <text class="wlIcon-31xuanze margin-right-xs text-bold"></text>
                    关注
                  </view>
                  <view v-else>
                    <text class="wlIcon-31guanbi margin-right-xs text-bold"></text>
                    取关
                  </view>
                </button>
              </view>
            </block>
          </view>
          <!-- 内容 -->
          <view class="content margin-tb-bj wanl-gray-dark text-cut-2" @tap="onFind(find)">
            <view class="cu-tag sm radius margin-right-xs" :class="[typeList[find.type]]">
              {{ find.type_text }}
            </view>
            {{ formatHtml(find.content) }}
          </view>
          <!-- 图片 -->
          <view class="container radius-bock">
            <block v-for="(img, kes) in find.images" :key="kes">
              <block v-if="find.type === 'live'">
                <view
                  class="item"
                  @tap="onFind(find)"
                  :class="[kes == 0 ? 'item-live' : '']"
                  :style="{
                    backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')',
                  }"
                >
                  <block v-if="kes == 0">
                    <view class="play">
                      <text :class="[find.live.state == 1 ? 'wlIcon-icon_zhibo-mian' : 'wlIcon-guijihuifang']"></text>
                    </view>
                    <view class="state text-white" v-if="find.live.state == 1">
                      <view class="tags wanl-bg-orange">
                        <text class="wlIcon-zhibo"></text>
                        <text class="text-min">直播</text>
                      </view>
                      <view class="text-sm">{{ find.live.views }} 在看</view>
                    </view>
                    <view class="state text-white" v-else>
                      <view class="tags bg-grey">
                        <text class="text-min">回放</text>
                      </view>
                      <view class="text-sm">{{ find.live.views }} 看过</view>
                    </view>
                    <!-- <view class="number text-white">
														<view>{{$wanlshop.toFormat(find.live.goods_ids.split(',').length,'hundred')}}</view>
														<text>宝贝</text>
													</view> -->
                    <view class="like text-center text-white" v-if="find.live.state == 1">
                      <view class="likebut">
                        <text class="wlIcon-yiguanzhu1"></text>
                      </view>
                      <text class="text-min">{{ find.live.like }}</text>
                    </view>
                  </block>
                </view>
              </block>
              <block v-else-if="find.type === 'video'">
                <view
                  class="item item-1 text-sl radius-bock"
                  :style="{ backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')' }"
                  @tap="onFind(find)"
                >
                  <text class="wlIcon-video text-white"></text>
                </view>
              </block>
              <block v-else>
                <block v-if="find.images.length == 1">
                  <view
                    class="item item-1 radius-bock"
                    @tap="previewImage(find.images, kes)"
                    :style="{
                      backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')',
                    }"
                  ></view>
                </block>
                <block v-else-if="find.images.length == 3">
                  <view
                    class="item"
                    @tap="previewImage(find.images, kes)"
                    :class="[kes == 0 ? 'item-3' : '']"
                    :style="{
                      backgroundImage: 'url(' + $wanlshop.oss(img, 200, 0) + ')',
                    }"
                  ></view>
                </block>
                <block v-else>
                  <view
                    class="item"
                    @tap="previewImage(find.images, kes)"
                    :style="{
                      backgroundImage: 'url(' + $wanlshop.oss(img, 200, 200) + ')',
                    }"
                  ></view>
                </block>
              </block>
            </block>
          </view>
          <!-- 商品 -->
          <scroll-view class="scroll-view margin-top-sm" scroll-x="true">
            <view
              class="scroll-view-item radius-bock"
              :class="[find.goods.length == 1 ? 'col-1' : '']"
              v-for="(goods, sub) in find.goods"
              :key="goods.id"
              @tap="onGoods(goods.id)"
            >
              <view class="img">
                <image lazy-load :src="$wanlshop.oss(goods.image, 50, 50)"></image>
              </view>
              <view class="content padding-left-bj text-cut text-df">
                {{ goods.title }}
                <view class="flex align-center">
                  <text class="text-price text-orange">{{ goods.price }}</text>
                </view>
              </view>
              <view class="icon text-lg wanl-gray-light">
                <text class="wlIcon-fanhui6"></text>
              </view>
            </view>
          </scroll-view>
          <view class="flex justify-between padding-tb-bj align-center">
            <view v-if="find.type == 'live'" class="wanl-gray-light text-sm" @tap="onFind(find)">
              {{ find.live.views }} 阅读
            </view>
            <view v-else class="wanl-gray-light text-sm" @tap="onFind(find)"> {{ find.views }} 阅读 </view>
            <view class="flex">
              <view :class="[find.isLike === 1 ? 'wanl-orange' : '']" @tap="handleLike(index)">
                <text :class="[find.isLike === 1 ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11']"></text>
                <text class="margin-left-xs">{{ find.likes }}</text>
              </view>
              <view class="margin-left" @tap="onFind(find, 'comments')" v-if="appConfig.comment_switch == 'Y'">
                <text class="wlIcon-pinglun"></text>
                <text class="margin-left-xs">{{ find.comments }}</text>
              </view>
            </view>
          </view>
          <view
            class="padding-tb-bj solid-top text-center text-orange"
            v-if="find.newGoods > 0"
            @tap="onShop(find.shop_id)"
          >
            进店查看 {{ find.newGoods }} 件新品
            <text class="wlIcon-fanhui6 margin-left-xs"></text>
          </view>
        </view>
      </view>
      <wanl-empty
        v-if="status !== 'loading' && dataList.length === 0"
        src="collect_default3x"
        text="没有找到任何发现动态"
      />
      <uni-load-more :status="status" :content-text="contentText" v-if="dataList.length > 0" />
    </block>
  </scroll-view>
</template>

<script>
export default {
  name: 'wanlShopFind',
  props: {
    // 页面配置
    windowHeight: {
      type: Number,
      default: 0,
    },
    headHeight: {
      type: Number,
      default: 0,
    },
    currentItemId: {
      type: String,
      default: '',
    },
    userNo: {
      type: String,
      default: '',
    },
    appConfig: {
      type: Object,
      default() {
        return {};
      },
    },
    user: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    currentItemId(newVal, oldVal) {
      if (newVal === 'follow') {
        this.loadData();
      }
    },
  },
  data() {
    return {
      typeList: {
        new: 'bg-gradual-yellow',
        live: 'wanl-bg-orange',
        want: 'bg-gradual-green',
        activity: 'bg-gradual-orange',
        show: 'wanl-bg-pink',
        video: 'wanl-bg-orange',
      },
      dataList: [], //数据
      current_page: 1, //当前页码
      last_page: 1, //总页码
      status: 'loading',
      contentText: {
        contentdown: '下拉加载更多',
        contentrefresh: '疯狂加载中...',
        contentnomore: '我是有底线的',
      },
    };
  },
  methods: {
    reload(newVal) {
      console.log(newVal);
      if (newVal === 'follow') {
        this.loadData();
      }
    },
    async loadData(type) {
      this.status = 'loading';
      let data = {
        page: this.current_page,
      };
      // 判断上拉还是下拉
      if (type === 'upper') {
        this.current_page = 1;
      } else if (type === 'lower') {
        if (this.current_page >= this.last_page) {
          this.status = 'noMore';
          return false;
        } else {
          this.current_page += 1;
        }
      }
      if (this.currentItemId === 'follow') {
        data.type = this.currentItemId;
      }
      // 请求数据
      await this.$api.get({
        url: '/wanlshop/find/find/getList',
        data: data,
        success: res => {
          if (type === 'lower') {
            this.dataList = this.dataList.concat(res.data);
          } else {
            this.dataList = res.data;
          }
          this.current_page = res.current_page; //当前页码
          this.last_page = res.last_page; //总页码
          // 判断是否还有数据
          if (res.current_page === res.last_page || res.total === 0) {
            this.status = 'noMore';
          } else {
            this.status = 'more';
          }
        },
      });
    },
    async handleLike(index) {
      if (this.$store.state.user.isLogin) {
        let data = this.dataList[index];
        this.$api.post({
          url: '/wanlshop/find/user/setFindUser',
          data: {
            id: data.id,
            type: 'likes',
          },
          success: res => {
            if (res.data === 0) {
              data.likes -= 1;
            } else {
              data.likes += 1;
            }
            data.isLike = res.data;
          },
        });
      } else {
        this.$wanlshop.to('/pages/user/auth/auth');
      }
    },
    async handleFollow(index, shop) {
      if (this.$store.state.user.isLogin) {
        let data = this.dataList[index];
        this.$api.post({
          url: '/wanlshop/find/user/setFindUser',
          data: {
            id: data.user_no,
            type: 'follow',
          },
          success: res => {
            if (shop) {
              let concern = this.$store.state.statistics.dynamic.concern;
              if (res.data === 0) {
                concern -= 1;
              } else {
                concern += 1;
              }
              this.$store.commit('statistics/dynamic', {
                concern: concern,
              });
            }
            data.isFollow = res.data;
          },
        });
      } else {
        this.$wanlshop.to('/pages/user/auth/auth');
      }
    },
    handleUpper() {
      // this.loadData('upper');
    },
    handleLower() {
      this.loadData('lower');
    },
    handleUser(user_no) {
      this.$wanlshop.to(`/pages/apps/find/user?id=${user_no}`);
    },
    //预览图片
    previewImage(image, index) {
      var imgArr = [];
      for (var item of image) {
        imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
      }
      uni.previewImage({
        urls: imgArr,
        current: imgArr[index],
        indicator: 'number',
      });
    },
    // 格式化html
    formatHtml(content) {
      return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
    },
  },
};
</script>

<style lang="scss">
.wanlshop-find-container {
  &__list {
    .userinfo {
      display: flex;
      justify-content: space-between;
      align-items: center;

      text {
        &[class*='wlIcon-'] {
          font-size: 28rpx;
        }
      }

      .avatar {
        width: calc(100% - 245rpx);
        display: flex;
        align-items: center;
        .cu-avatar {
          background-color: #f5f5f5;
          flex-shrink: 1;
        }
        .content {
          width: calc(100% - 90rpx);
        }
        .cu-tag {
          font-size: 20rpx;
          padding: 0px 10rpx !important;
        }
      }
      // 待优化溢出,临时解决方案
      .menu {
        text-align: right;
        width: 245rpx;
      }

      .cu-btn {
        &.sm {
          padding: 0 20rpx;
          font-size: 26rpx;
          height: 50rpx;
        }
      }
    }

    .content {
      .cu-tag {
        &.sm {
          padding: 6rpx;
        }
      }
    }

    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;

      &.col-2 {
        grid-template-columns: 1fr 1fr;
      }

      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #fff;
        min-height: 6rem;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        &.item-1 {
          grid-column: 1 / 3;
          grid-row: 1 / 3;
          height: 600rpx;
        }

        &.item-3 {
          grid-column: 1 / 3;
          grid-row: 1 / 3;
        }

        &.item-live {
          position: relative;
          grid-column: 1 / 3;
          grid-row: 1 / 3;

          .play {
            width: 120rpx;
            height: 120rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            font-size: 56rpx;
            color: #fff;
          }

          .state {
            display: flex;
            position: absolute;
            left: 20rpx;
            bottom: 20rpx;
            background-color: rgba(0, 0, 0, 0.1);
            height: 36rpx;
            line-height: 36rpx;
            border-radius: 8rpx;
            overflow: hidden;

            & > view {
              padding: 0 12rpx;
            }

            .tags {
              height: 100%;
              border-radius: 8rpx;
              font-size: 28rpx;

              & > text {
                margin-right: 4rpx;
              }
            }
          }

          .number {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 8rpx 8rpx 0 20rpx;
            overflow: hidden;
            padding: 8rpx 6rpx;
            top: 10rpx;
            right: 10rpx;
            line-height: 1;
            text-align: center;

            & > view {
              font-size: 30rpx;
            }

            & > text {
              font-size: 11px;
            }
          }

          .like {
            position: absolute;
            bottom: 15rpx;
            right: 30rpx;
            line-height: 1.2;

            .likebut {
              background-color: #f40;
              border-radius: 50%;
              width: 45rpx;
              line-height: 46rpx;
              height: 45rpx;
              font-size: 26rpx;
            }
          }
        }
      }
    }

    .scroll-view {
      white-space: nowrap;
      width: 100%;

      .scroll-view-item {
        display: inline-flex;
        width: 60%;
        height: 100rpx;
        overflow: hidden;
        margin-right: 10rpx;
        background-color: #f9f9f9;
        align-items: center;

        &.col-1 {
          width: 100%;
          margin-right: 0;
        }

        .img {
          height: 100rpx;
          width: 100rpx;
          border-radius: 18rpx 0 0 18rpx;
          background-color: #efefef;

          image {
            height: 100rpx;
            width: 100rpx;
            border-radius: 18rpx 0 0 18rpx;
            background-color: #efefef;
          }
        }

        .content {
          flex: 1;
          line-height: 1.3;
        }

        .icon {
          width: 60rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
